<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据库文档生成 - Stone-Boot</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background: #f4f4f4;
        }
        .container {
            width: 80%;
            margin: auto;
            overflow: hidden;
        }
        header, footer {
            background: #333;
            color: #fff;
            text-align: center;
            padding: 10px 0;
        }
        .navbar {
            background: #555;
            color: #fff;
            padding: 10px 0;
        }
        .navbar a {
            color: #fff;
            text-decoration: none;
            padding: 10px 15px;
            display: inline-block;
        }
        .navbar a:hover, .navbar a.active {
            background: #777;
        }
        .main-content {
            padding: 20px;
            background: #fff;
            min-height: 400px;
        }
        fieldset {
            border: 1px solid #ddd;
            margin-bottom: 20px;
            padding: 10px;
        }
        legend {
            padding: 0 5px;
            font-weight: bold;
        }
        label {
            display: block;
            margin-bottom: 5px;
        }
        input[type="text"], input[type="password"], textarea {
            width: 100%;
            padding: 8px;
            margin-bottom: 10px;
            border: 1px solid #ddd;
        }
        input[type="button"] {
            padding: 10px 20px;
            background: #555;
            color: #fff;
            border: none;
            cursor: pointer;
            display: block;
            margin-top: 10px;
        }
        input[type="button"]:hover {
            background: #777;
        }
    </style>
    <script>
        // 表单提交事件监听器
        document.getElementById('myForm').addEventListener('submit', function(event) {
            event.preventDefault(); // 阻止表单的默认提交行为

            var xhr = new XMLHttpRequest(); // 创建XMLHttpRequest对象
            xhr.open('post', '/databaseDocument/generatorDocument', true); // 初始化请求

            // 设置请求头，如果发送的是JSON数据
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

            // 定义响应处理函数
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4) { // 请求已完成
                    if (xhr.status === 200) { // 请求成功
                        alert('请求成功！');
                        // 这里可以添加其他成功后的逻辑，例如清空表单
                    } else {
                        alert('请求失败：' + xhr.status);
                    }
                }
            };

            // 发送请求
            xhr.send(new FormData(this));
        });

        // 添加忽略表前缀
        function addIgnorePrefixesInputField() {
            var container = document.getElementById('ignorePrefixesContainer');
            var inputCount = container.children.length;
            inputCount = inputCount === 0 ? 1 : inputCount/2 + 1;
            var newInput = document.createElement('input');
            newInput.type = 'text';
            newInput.id = 'ignorePrefix' + inputCount;
            newInput.name = 'ignorePrefixes'; // 使用数组格式命名
            newInput.required = true;
            var label = document.createElement('label');
            label.form = 'ignorePrefix' + inputCount;
            label.textContent = '忽略表前缀' + inputCount;
            container.appendChild(label);
            container.appendChild(newInput);
            // 如果需要，可以添加移除按钮等
        }

        // 添加忽略表后缀
        function addIgnoreSuffixesInputField() {
            var container = document.getElementById('ignoreSuffixesContainer');
            var inputCount = container.children.length;
            inputCount = inputCount === 0 ? 1 : inputCount/2 + 1;
            var newInput = document.createElement('input');
            newInput.type = 'text';
            newInput.id = 'ignoreSuffix' + inputCount;
            newInput.name = 'ignoreSuffixes'; // 使用数组格式命名
            newInput.required = true;
            var label = document.createElement('label');
            label.form = 'ignoreSuffix' + inputCount;
            label.textContent = '忽略表后缀' + inputCount;
            container.appendChild(label);
            container.appendChild(newInput);
            // 如果需要，可以添加移除按钮等
        }
    </script>

</head>
<body>
<header>
    <div class="container">
        <h1>数据库文档生成 - Stone-Boot</h1>
    </div>
</header>
<div class="navbar">
    <div class="container">
        <a href="/" class="active">首页</a>
        <a href="#">数据库文档生成</a>
        <a href="#">代码生成</a>
    </div>
</div>
<div class="main-content container">
    <h2>生成数据库文档</h2>
    <form th:action="@{http://127.0.0.1:8888/databaseDocument/generatorDocument}" th:method="post" id="db-doc-form">
        <!-- 数据库信息模块 -->
        <fieldset>
            <legend>数据库信息</legend>

            <label for="ip"><span style="color: red;"> * </span>IP:</label>
            <input type="text" id="ip" name="ip" th:value="${ip}" required>

            <label for="port"><span style="color: red;"> * </span>端口号:</label>
            <input type="text" id="port" name="port" th:value="${port}" required>

            <label for="username"><span style="color: red;"> * </span>用户名:</label>
            <input type="text" id="username" name="username" th:value="${username}" required>

            <label for="password"><span style="color: red;"> * </span>密码:</label>
            <input type="password" id="password" name="password" th:value="${password}" required>

            <label for="tableName"><span style="color: red;"> * </span>表名称:</label>
            <input type="text" id="tableName" name="tableName" th:value="${tableName}" required>
        </fieldset>

        <!-- 文档信息模块 -->
        <fieldset>
            <legend>文档信息</legend>

            <label for="outputPath"><span style="color: red;"> * </span>文档输出路径:</label>
            <input type="text" id="outputPath" name="outputPath" th:value="${outputPath}" required>

            <!-- 忽略表前缀的输入框放在这里 -->
            <div id="ignorePrefixesContainer">
                <!-- JavaScript将在这里添加新的输入框 -->
            </div>
            <!-- 忽略表后缀的输入框放在这里 -->
            <div id="ignoreSuffixesContainer">
                <!-- JavaScript将在这里添加新的输入框 -->
            </div>

            <label for="docName">文档名称:</label>
            <input type="text" id="docName" name="docName" th:value="${docName}" required>

            <label for="version">版本号:</label>
            <input type="text" id="version" name="version" th:value="${version}" required>

            <label for="description">描述:</label>
            <textarea id="description" name="description" rows="4" th:value="${description}" required></textarea>
        </fieldset>

        <!-- 添加按钮 -->
        <button type="button" onclick="addIgnorePrefixesInputField()">添加忽略表前缀</button>
        <!-- 添加忽略表后缀按钮 -->
        <button type="button" onclick="addIgnoreSuffixesInputField()">添加忽略表后缀</button>
        <!-- 生成按钮 -->
        <input type="submit" id="generate-doc" value="生成文档">
    </form>
</div>
<footer>
    <div class="container">
        <p>版权所有 &copy; 2024 Stone-Boot</p>
    </div>
</footer>
</body>
</html>